.ifalse {
  background: #f0f0f1;
  width: calc(100% - 20px);
  height: calc(100vh - 120px);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* logo */
.ifalse-logo .box {
    width: 165px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.ifalse-logo .box .title {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
}
.ifalse-logo .box .title .block {
    width: 0%;
    height: inherit;
    background-color: #8183ff;
    background: linear-gradient(120deg, #8183ff, #58b3f5); 
    position: absolute;
    animation: mainBlock 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    display: flex;
}
.ifalse-logo .box .title h1 {
    font-family: "Poppins";
    color: #333;
    font-size: 32px;
    -webkit-animation: mainFadeIn .8s forwards;
    -o-animation: mainFadeIn .8s forwards;
    animation: mainFadeIn .8s forwards;
    animation-delay: .8s;
    opacity: 0;
    display: flex;
    align-items: baseline;
    position: relative;
}
.ifalse-logo .box .title h1 span {
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #8183ff;
    -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 2.2s;
    margin-left: 5px;
    margin-top: -10px;
    position: absolute;
    bottom: 13px;
    right: -12px;
}
.ifalse-logo .box .role {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    margin-top: -10px;
}
.ifalse-logo .box .role .block {
    width: 0%;
    height: inherit;
    background-color: #58b3f5;
    position: absolute;
    animation: secBlock 1s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 1.2s;
    display: flex;
}
.ifalse-logo .box .role p {
    animation: secFadeIn .8s forwards;
    animation-delay: 2s;
    opacity: 0;
    font-weight: 400;
    font-family: "Lato";
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

/* 子选项 */
.description-primary {
  color: #8183ff;
}
  
@keyframes mainBlock {
    0% {
      width: 0%;
      left: 0;
    }
    50% {
      width: 100%;
      left: 0;
    }
    100% {
      width: 0;
      left: 100%;
    }
}
@keyframes secBlock {
    0% {
      width: 0%;
      left: 0;
    }
    50% {
      width: 100%;
      left: 0;
    }
    100% {
      width: 0;
      left: 100%;
    }
}
@keyframes mainFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes popIn {
    0% {
      width: 0px;
      height: 0px;
      background: #8183ff;
      border: 0px solid #ddd;
      opacity: 0;
    }
    50% {
      width: 10px;
      height: 10px;
      background: #8183ff;
      opacity: 1;
      bottom: 45px;
    }
    65% {
      width: 7px;
      height: 7px;
      bottom: 0px;
      width: 15px;
    }
    80% {
      width: 10px;
      height: 10px;
      bottom: 20px;
    }
    100% {
      width: 8px;
      height: 8px;
      background: #8183ff;
      border: 0px solid #222;
      bottom: 0px;
    }
}
@keyframes secFadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
}
  
@keyframes top {
    0% {
      opacity: 0;
      bottom: -80px;
    }
    100% {
      opacity: 1;
      bottom: 0px;
    }
}
@keyframes icon {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    50% {
      opacity: 1;
      transform: scale(1.3) rotate(-2deg);
    }
    100% {
      opacity: 1;
      bottom: 0px;
    }
}

/* content */
.ifalse-text {
  width: 165px;
}
.ifalse-text div {
  margin-top: 15px;
}
.ifalse-text div:last-child {
  color: #999;
}
.ifalse-text div span {
  cursor: default;
  margin: 0 3px;
}
.ifalse-text a {
  color: #999;
  color: #8183ff;
  text-decoration: none;
  line-height: 1.8;
}
.ifalse-text a:hover {
  text-decoration: underline;
  opacity: 1;
}
.ifalse-text .start a {
  display: block;
  text-align: center;
  padding: 6px 20px;
  color: #fff;
  border-radius: 6px;
  background-color: #8183ff;
  background: linear-gradient(120deg, #8183ff, #58b3f5); 
  animation: hueRotate 3s infinite alternate;
  text-decoration: none;
  font-size: 14px;
  transition: all .3s;
}
.ifalse-text div a:hover {
  opacity: .8;
}
.ifalse-text .start a:active,
.ifalse-text .start a:focus {
  box-shadow: none;
  border: 0;
  outline: 0;
}
@media screen and (max-width: 782) {
  .ifalse {
    width: calc(100% - 10px);
    margin-top: 10px;
  }
}

@keyframes hueRotate { 
  from { 
      filter: hue-rotate(0); 
  } 
  to { 
      filter: hue-rotate(30deg); 
  } 
} 
